<template>
  <div
    class="content"
    :style="{ background: applet?.backgroundColor ?? '#fff' }"
  >
    <template v-if="isWinxin == 1">
      <template v-if="isLoading">
        <div class="flex flex-j-c box-border pt-22n min-100 box-border">
          <van-loading />
        </div>
      </template>
      <template v-else>
        <template v-if="applet.path && applet.appId">
          <img
            class="img"
            v-if="applet.backgroundImage"
            :src="applet.backgroundImage"
            alt=""
          />
          <div class="btn-wrap" v-html="html"></div>
        </template>
        <template v-else>
          <div class="w-full flex-col-center pt-10n">
            <van-icon name="clear" color="red" size="80" />
            <h4 class="mt-30 text333">小程序参数错误</h4>
          </div>
        </template>
      </template>
    </template>
    <template v-else-if="isWinxin == 2">
      <div class="w-full flex-col-center pt-10n">
        <van-icon name="info" color="#10AEFF" size="80" />
        <h4 class="mt-30 text333">请在微信客户端打开链接</h4>
      </div>
    </template>
  </div>
</template>
<script setup>
import wx from "weixin-js-sdk";
import { getWxConfigParams } from "@/api";
import { getQueryString } from "@/utils/common";
const u = navigator.userAgent;
const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
const isWinxin = ref();
const applet = reactive({
  path: "",
  appId: "",
  button: "",
  backgroundImage: "",
});
const isLoading = ref(true);
const html = computed(() => {
  return `<wx-open-launch-weapp 
            appid="${applet.appId}" 
            path="${applet.path}" 
            @launch="handleLaunchFn" 
            @error="handleErrorFn">
              <template>
                <style>
                  .btn { 
                    display: inline-block;
                    cursor: pointer;
                    height: 52px;
                    width: auto;
                  }
                </style>
                <img class="btn" src="${
                  applet.button ||
                  "https://images.maishou88.com/admin/buyer_circle_sc/20240430/20240430103421_2406.gif"
                }"/>
              </template>
            </wx-open-launch-weapp>`;
});
const href = location.href.split("#")[0];
getWxConfigParams({
  url: href,
})
  .then((res) => {
    wx.config({
      debug: false,
      appId: "wxdf48c27f2d58324d",
      timestamp: res.timestamp,
      nonceStr: res.noncestr,
      signature: res.signature,
      jsApiList: ["chooseImage", "previewImage"],
      openTagList: ["wx-open-launch-weapp"],
    });
  })
  .finally(() => {
    isLoading.value = false;
  });
const handleErrorFn = (err) => {
  console.log(err);
};
const handleLaunchFn = (res) => {
  console.log(res);
};
const getUrl = () => {
  if (/MicroMessenger/i.test(window.navigator.userAgent)) {
    //微信环境
    wx.miniProgram.getEnv(function (res) {
      if (!res.miniprogram) {
        isWinxin.value = 1;
        const url = window.location.href;
        const urlArr = url.split("?");
        let appletO = getQueryString("applet", urlArr[1]);
        if (appletO && appletO != "null") {
          appletO = decodeURIComponent(appletO);
          appletO = JSON.parse(appletO);
        }
        Object.assign(applet, appletO);
      } else {
        isWinxin.value = 2;
      }
    });
  } else {
    //非微信浏览器
    isWinxin.value = 2;
  }
};

onMounted(() => {
  //首页跳转返回 IOS不兼容页面自动刷新问题
  if (!isAndroid) {
    window.onpageshow = function (event) {
      if (event.persisted) {
        window.location.reload();
      }
    };
  }
  getUrl();
});
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  .img {
    width: 100%;
    object-fit: contain;
  }
  .btn-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 116px;
  }
}
</style>
